/* Shared styles for the 1px line */
.resize-control {
  background-color: hsl(var(--border));
  z-index: 20;
}

/* Vertical control, left side */
.resize-control--position-VERTICAL {
  width: 1px;
  height: 100%;
  position: absolute;
}
.resize-control--position-VERTICAL:hover:not(.resize-control--disabled) {
  cursor: col-resize;
}

/* Horizontal control, top side */
.resize-control--position-HORIZONTAL {
  position: absolute;
  width: 100%;
  height: 1px;
}
.resize-control--position-HORIZONTAL:not(.resize-control--disabled) {
  cursor: row-resize;
}

/* Effect upon hover/drag */
.resize-control:before {
  content: '';
  transition: 0.2s ease background-color 0ms;
}
.resize-control--position-VERTICAL:before {
  position: absolute;
  width: 5px;
  height: 100%;
  left: -2px;
  top: 0;
}
.resize-control--position-HORIZONTAL:before {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -2px;
  left: 0;
}
.resize-control--is-dragging:before,
.resize-control:hover:not(.resize-control--disabled):before {
  background-color: hsl(var(--primary));
  z-index: 100;
  /* Delay the transition effect so it only appears when the user shows intent */
  transition: 0.2s ease background-color 300ms;
}

/* When control is being dragged, applies styles to prevent text
   selection and try to keep correct cursor displayed */
body:has(.resize-control--is-dragging) * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body:has(.resize-control--is-dragging.resize-control--position-VERTICAL) {
  cursor: col-resize !important;
}
body:has(.resize-control--is-dragging.resize-control--position-HORIZONTAL) {
  cursor: row-resize !important;
}
